window.addEventListener('load', function () {
    let small = document.querySelector('.small');
    let mask = document.querySelector('.mask');
    let big = document.querySelector('.big');

    small.onmouseenter = function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    }

    small.onmouseleave = function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    }

    small.onmousemove = function (e) {
        let pageX = e.pageX;
        let pageY = e.pageY;

        let x = pageX - this.offsetParent.offsetLeft;
        let y = pageY - this.offsetParent.offsetTop;

        let maskX = x - mask.offsetWidth * 1.4;
        let maskY = y - mask.offsetHeight * 1.8;

        let maskMax = small.offsetWidth - mask.offsetWidth;

        if (maskX < 0) {
            maskX = 0;
        } else if (maskX > maskMax) {
            maskX = maskMax;
        }

        if (maskY < 0) {
            maskY = 0;
        } else if (maskY > maskMax) {
            maskY = maskMax
        }

        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        //   // 大图片的最大移动距离 = 图片 - 盒子
        let bigImg = document.querySelector('#bigImg');
        let bigMax = bigImg.offsetWidth - big.offsetWidth;

        // 大图片的移动距离 = 遮挡层的移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        let bigX = maskX * bigMax / maskMax;
        let bigY = maskY * bigMax / maskMax;

        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    }

    let color = document.querySelector('.color')

    color.onclick = function (e) {
        if (e.target.nodeName == 'A') {
            e.target.className = 'bor';
        }
    }

    let jia = document.querySelector('.jia');
    let jian = document.querySelector('.jian');
    let shu = document.querySelector('.shu');

    let num = 0;
    jia.onclick = function (e) {
        num++;
        shu.innerHTML = num;
        e.stopPropagation();
    }

    jian.onclick = function (e) {
        e.stopPropagation();
        if (num == 0) {
            num = 0;
        } else {
            num--;
        }

        shu.innerHTML = num;
    }
})